<template>
	<view>
		<u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="change" bar-width="100"></u-tabs>
		<!-- 	<hr style="background-color: #999999; width: 94%;margin-left: 10px;"/> -->
		<view class="mt-4 pl-4 pr-4">
			<view class="flex flex-row-reverse">
				<!-- maintenance_state -->
				<view v-if="details.maintenance_state==1" class="bg-success text-white"
					style="padding: 10rpx ;  border-top-left-radius: 20rpx;  border-bottom-right-radius: 20rpx;">
					已保养
				</view>
				<view v-if="details.maintenance_state==0" class="bg-warning text-white"
					style="padding: 10rpx ;  border-top-left-radius: 20rpx; background-color: orange;  border-bottom-right-radius: 20rpx;">
					待保养
				</view>
				<view v-if="details.maintenance_state==2" class="bg-red text-white"
					style="padding: 10rpx;  border-top-left-radius: 20rpx;  border-bottom-right-radius: 20rpx;">
					未保养
				</view>
			</view>
			<view class="font-weight-bold font-lg "
				style="text-align:left; margin-top:-40rpx;display: flex;align-items: center;">
				<image style="width:48rpx;height:48rpx;vertical-align: middle; " src="../../static/image/weihu.png">
				</image>
				<text>{{details.equipment_name}}</text>
			</view>
		</view>
		<view v-if="current==0">
			<view class="p-4 pb-2 pt-1 ">


				<view class="text-gray flex" style="line-height: 70rpx;">
					具体位置：
					<span class="text-hover-dark">{{details.specific_location}}</span>
				</view>
				<!-- <view class="mt-3 flex" v-if="equipmentImageList.length>0"> -->
				<!-- <image v-for="(list,id) in details.equipment_image.split(',')" class="d-block rounded-2 m-1"
						style="width:180rpx;height:180rpx" :src="list"></image> -->
				<view class="wrap mt-2" v-if="equipmentImageList.length>0">
					<u-swiper :list="equipmentImageList" height="350"></u-swiper>
				</view>
				<!-- </view> -->
				<view>

					<view class="text-gray flex" style="line-height: 70rpx;">
						<!-- <span v-if="details.equipment_type==2">设施</span>
						<span v-if="details.equipment_type==1">设备</span> -->
						品牌及型号：
						<span class="text-hover-dark">{{details.brand_models || '暂无'}}</span>
					</view>
					<view class="flexClsNowrapSpcBtw">
						<view class="text-gray flex" style="line-height: 70rpx;">
							安装时间：
							<span class="text-hover-dark">
								{{details.equipment_time!=null&&details.equipment_time!=''?details.equipment_time.substr(0,10):''}}
							</span>
						</view>
						<view v-if="details.annually" class="text-gray flex" style="line-height: 70rpx;">
							年检状态：
							<span v-if="details.annually=='已年检'" class="text-hover-dark "
								style="color:#28a745">{{details.annually}}</span>
							<span v-if="details.annually=='未年检'" class="text-hover-dark "
								style="color:red">{{details.annually}}</span>
						</view>
					</view>
					<view v-if="details.equipment_introduce != null">
						<!-- <span style='color: #999; line-height: 50rpx;' v-if="details.equipment_type == 1 ">设备介绍：</span>
						<span style='color: #999' v-if="details.equipment_type == 2 ">设施介绍：</span> -->
						<view style="　text-indent: 2em;;line-height: 1.8;">{{details.equipment_introduce}}</view>
					</view>
				</view>
			</view>
			<view class="" style="margin: 0 50rpx;  height: 2rpx;background:#eeeeee ;">

			</view>
			<view class=" p-4 pt-1">
				<view class="flexClsNowrapSpcBtw" style="line-height: 70rpx;">
					<view class="text-gray">
						报修电话：
					</view>
					<view>
						{{details.project_phone!=null&&details.project_phone!=''?details.project_phone:'暂无'}}
					</view>
				</view>
				<view class="flexClsNowrapSpcBtw" style="line-height: 70rpx;">
					<view class="text-gray">
						维保单位：
					</view>
					<view>
						{{details.superior_unit!=null&&details.superior_unit!=''?details.superior_unit:'暂无'}}
					</view>
				</view>
				<view class="flexClsNowrapSpcBtw" style="display: flex;justify-content: space-between;">
					<view class="flexClsNowrapSpcBtw" style="line-height: 70rpx;">
						<view class="text-gray">
							维保人：
						</view>
						<view>
							{{details.maintenance_user!=null&&details.maintenance_user!=''?details.maintenance_user:'暂无'}}
						</view>
					</view>
					<view class="flexClsNowrapSpcBtw" style="line-height: 70rpx;">
						<view class="text-gray">
							电话：
						</view>
						<view>
							{{details.project_phone!=null&&details.project_phone!=''?details.project_phone:'暂无'}}
						</view>
					</view>
				</view>

				<view class="flexClsNowrapSpcBtw" style="line-height: 70rpx;">
					<view class="text-gray">
						管理单位：
					</view>
					<view>
						{{details.pro_name!=null&&details.pro_name!=''?details.pro_name:'暂无'}}
					</view>
				</view>
				<view class="flexClsNowrapSpcBtw border-bottom pb-1"
					style="display: flex;justify-content: space-between;">
					<view class="flexClsNowrapSpcBtw" style="line-height: 70rpx;">
						<view class="text-gray">
							管理人：
						</view>
						<view>
							{{details.project_principal_name!=null&&details.project_principal_name!=''?details.project_principal_name:'暂无'}}
						</view>
					</view>
					<view class="flexClsNowrapSpcBtw" style="line-height: 70rpx;">
						<view class="text-gray">
							电话：
						</view>
						<view>
							{{details.project_principal_tel!=null&&details.project_principal_tel!=''?details.project_principal_tel:'暂无'}}
						</view>
					</view>
				</view>
				<!-- <view class="" style="display: flex; justify-content: space-between;align-items: center;"> -->
				<view class=" " style="display: flex;line-height: 70rpx;">
					<view class="text-gray">
						保养周期：
					</view>
					<span style='color: #333333' v-if='details.maintenance_cycle==1'>一天保养一次</span>
					<span style='color: #333333' v-if='details.maintenance_cycle==2'>一周保养一次</span>
					<span style='color: #333333' v-if='details.maintenance_cycle==3'>一月保养一次</span>
					<span style='color: #333333' v-if='details.maintenance_cycle==4'>一季保养一次</span>
					<span style='color: #333333' v-if='details.maintenance_cycle==5'>半年保养一次</span>
					<span style='color: #333333' v-if='details.maintenance_cycle==6'>一年保养一次</span>
					<span style='color: #333333' v-if='details.maintenance_cycle==7'>十五天保养一次</span>
				</view>
				<view class="" style="display: flex;line-height: 70rpx;">
					<view class="text-gray">
						责任岗位：
					</view>
					<view>
						{{details.dept_name}}-{{details.post_name}}
					</view>
				</view>

				<!-- </view> -->

				<view class="flexClsNowrapSpcBtw" style="display: flex;justify-content: space-between;">
					<view class="flex" style="line-height: 70rpx;">
						<view class="text-gray">
							本次保养时间：
						</view>
						<view>
							{{details.this_maintenance_time!=null&&details.this_maintenance_time!=''?details.this_maintenance_time.substr(0,10):'暂无'}}

						</view>
					</view>
					<view class="flex" style="line-height: 70rpx;">
						<view class="text-gray">
							保养人：
						</view>
						<view>
							{{details.maintenance_user_name!=null&&details.maintenance_user_name!=''?details.maintenance_user_name:'暂无'}}

						</view>
					</view>
				</view>
				<view class="flexClsNowrapSpcBtw" style="line-height: 70rpx;">
					<view class="text-gray">
						下次保养时间：
					</view>
					<view>
						{{details.next_maintenance_time!=null&&details.next_maintenance_time!=''?details.next_maintenance_time.substr(0,10):'暂无'}}
					</view>
				</view>
				<view class="" style=" height: 2rpx;background: #eee;">

				</view>
				<!-- <view class="flexClsNowrapSpcBtw" style="line-height: 70rpx;">
					<view class="text-gray">
						设施位置
					</view>
					<view>
						{{details.pro_name}}
					</view>
				</view>
				
				<view class="flexClsNowrapSpcBtw" style="line-height: 70rpx;">
					<view class="text-gray">
						项目经理
					</view>
					<view>
						{{details.project_principal_name!=null&&details.project_principal_name!=''?details.project_principal_name:'暂无'}}
					</view>
				</view>
				<view class="flexClsNowrapSpcBtw" style="line-height: 70rpx;">
					<view class="text-gray">
						项目经理电话
					</view>
					<view>
						{{details.project_principal_tel!=null&&details.project_principal_tel!=''?details.project_principal_tel:'暂无'}}
					</view>
				</view>
				<view class="flexClsNowrapSpcBtw" style="line-height: 70rpx;">
					<view class="text-gray">
						责任人姓名
					</view>
					<view>
						{{details.person_liable_name!=null&&details.person_liable_name!=''?details.person_liable_name:'暂无'}}
					</view>
				</view>
				<view class="flexClsNowrapSpcBtw" style="line-height: 70rpx;">
					<view class="text-gray">
						责任人电话
					</view>
					<view>
						{{details.person_liable_tel!=null&&details.person_liable_tel!=''?details.person_liable_tel:'暂无'}}
					</view>
				</view> -->
				<button class="yilingqu" @click='goBack'>
					返回
				</button>
			</view>

		</view>
		<view v-if="current==1">
			<view class="" style=" margin: 30rpx 50rpx 0; height:4rpx;background: #eee;"></view>
			<view class="container mt-2">
				<view style="padding: 20px 20px;">
					<view class="user_for" v-for="(list,id) in maintenanceInformation" :key="id">
						<view>
							<span v-if='list.maintenance_state==0'>
								{{list.maintenance_start_time!=null&&list.maintenance_start_time!=''? list.maintenance_start_time.substring(0, 4):''}}年
							</span>
							<span v-if='list.maintenance_state==1'>
								{{list.maintenance_time!=null&&list.maintenance_time!=''? list.maintenance_time.substring(0, 4):''}}年
							</span>
							<span v-if='list.maintenance_state==2'>
								{{ list.maintenance_end_time!=null&&list.maintenance_end_time!=''?list.maintenance_end_time.substring(0, 4):''}}年
							</span>
						</view>
						<view style='position: absolute;margin-top: 20px'>
							<span v-if='list.maintenance_state==0'
								style='padding: 2px 2px; color: orange;border: 4rpx solid orange;border-radius: 5px;font-size: 12px;'>待保养</span>
							<span v-if='list.maintenance_state==1'
								style='padding: 2px 2px; color: green;border: 4rpx solid green;border-radius: 5px;font-size: 12px;'>已保养</span>
							<span v-if='list.maintenance_state==2'
								style='padding: 2px 2px; color: red;border: 4rpx solid red;border-radius: 5px;font-size: 12px;'>未保养</span>
						</view>
						<view class="line_box">
							<!-- 圆球 -->
							<view class="line_radio"
								:style="{ 'background' : list.istrue ? '#578EF0' : '#8e8b8d' , 'border' : list.istrue ? 'solid 14rpx #578EF0' : 'solid 6rpx #b9b7b6'}">
							</view>
							<!-- 线 -->
							<view class="line_for" :style="{ 'background' : list.istrue ? '#578EF0 ' : '#8e8b8d'}">
							</view>
						</view>

						<view class="right_box" style="padding-bottom: 20px;"
							:style="{ 'color' : list.istrue ? '#333' : '#8e8b8d'}">
							<view style='margin-top: 4px'>
								<view>{{list.times}}</view>
							</view>
							<view style='margin-top: 7px'>
								<span>设备状态：</span>
								<span v-if='list.equipment_type == 0' style='color: #00CD00'>正常</span>
								<span v-else-if='list.equipment_type == 1' style='color: #b94a48'>损坏</span>
								<span v-else style='color: #f0a83b;'>未知</span>
							</view>
							<view style="margin-top: 7px;">
								<span v-if='list.maintenance_state==0' style='color: #000000;'>设备设施处于待保养状态！</span>
								<span v-if='list.maintenance_state==2' style='color: #000000'>该周期设备设施未进行保养！</span>
							</view>
							<view style="display: flex;justify-content: space-between;">
								<view v-if='list.maintenance_state==1' style='color: #999'>保养人：<span
										style='color: #333'>{{ list.user_name }}</span></view>
								<view v-if='list.maintenance_state==1' style='color: #999;margin-left: 30px;'>
									保养方式：<span style='color: #333'>{{ list.maintenance_type }}</span></view>
							</view>
							<view style="margin-top: 10px;">
								<!-- <span v-if='list.maintenance_state==1' style='color: #999'>保养内容：</span> -->
								<view style='color: #333;text-indent: 2em;line-height:2em'>
									{{ list.maintenance_content }}
								</view>
							</view>
							<view style="margin-top: 10px;" v-if="list.maintenance_image !=null">
								<!-- <span style='color: #999'>维保图片：</span> -->
								<view style="width: 83px;height: 83px;display: -webkit-box;margin-top: 5px;"
									v-if="list.maintenance_image">
									<image
										style="width: 100%;height: 100%; border-radius: 16rpx;object-fit: cover;margin-right: 8rpx;"
										v-for="(item,id) in list.maintenance_image.split(',')" :src="item"
										@click="preview(item,id,list.maintenance_image)" mode="aspectFill">
									</image>
								</view>
							</view>
							<!-- 设备设施报修详情 -->

							<!-- <view v-for="(list,id) in list.cdoMapperResultList.take_photos">
											<view v-if='list.take_photos!=null'>
												<span v-if='list.take_photos.task_state==1' style='color: #999'>报修状态：<span
													style='color: #333'>待处理</span></span>
												<span v-if='list.take_photos.task_state==2' style='color: #999'>报修状态：<span
													style='color: #333'>处理中</span></span>
												<span v-if='list.take_photos.task_state==3' style='color: #999'>报修状态：<span
													style='color: #333'>已完成</span></span>
													
											
											</view>
										</view> -->

							<view v-if='list.take_photos!=null' style="margin-top: 10px;">
								<span v-if='list.take_photos.task_state==1' style='color: #999'>报修状态：<span
										style='color: #333'>待处理</span></span>
								<span v-if='list.take_photos.task_state==2' style='color: #999'>报修状态：<span
										style='color: #333'>处理中</span></span>
								<span v-if='list.take_photos.task_state==3' style='color: #999'>报修状态：<span
										style='color: #333'>已完成</span></span>



								<span v-if='list.take_photos.task_state!=1'
									style='color: #999;margin-left: 20px;'>处理人：<span
										style='color: #333'>{{ list.take_photos.take_orders_name }}</span></span>
								<view style="margin-top: 10px;">
									<span v-if='list.take_photos.task_state==3' style='color: #999'>完成说明：<span
											style='color: #333'>{{ list.take_photos.complete_content }}</span></span>
								</view>
								<view style="margin-top: 10px;" v-if="list.take_photos.complete_image!=null">
									<span style='color: #999'>图片：</span>
									<view style="width: 83px;height: 83px;display: -webkit-box;margin-top: 5px;">
										<image style="width: 100%;height: 100%; border-radius:20rpx;"
											v-for="(item,id) in list.take_photos.complete_image.split(',')" :src="item"
											@click="preview(item,id,list.take_photos.complete_image)" mode=""></image>
									</view>
								</view>
							</view>

							<!-- <hr style="margin-top: 15px;color: #eee;background: #eee;"> -->
							<view class="" style=" height:4rpx;background: #eee;">

							</view>

						</view>
					</view>
				</view>

			</view>

			<view class=""
				style="display: flex;justify-content: center; color: rgb(153, 153, 153);padding-bottom: 30rpx;">
				--以下无保养记录--
			</view>
		</view>

		<!-- <view style="width: 100%;margin-top: 30rpx;padding-bottom: 30rpx;">
			<button @click='prev' style="width: 80%;height: 84rpx;background: linear-gradient(180deg, #76D904 0%, #417505 100%);
										 border-radius: 44rpx;line-height: 84rpx;color: #FFFFFF;text-align: center;font-size: 32rpx;">
				返回列表
			</button>
		</view> -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				details: {},
				numList: [{
					name: '下单',
				}, {
					name: '出库'
				}, {
					name: '运输'
				}, {
					name: '签收'
				}, ],
				equipmentImageList: [],
				tabsList: [{
					name: '设备信息'
				}, {
					name: '维保记录'
				}],
				current: 0,
				id: '',
				maintenanceInformation: []
			}
		},
		onLoad(option) {
			this.id = option.id
			this.maintenanceDetails(option.id)
		},
		created() {

		},
		methods: {
			goBack() {
				uni.navigateBack(1)
			},
			change(index) {
				this.current = index;
				if (this.current == 0) {
					this.maintenanceDetails(this.id)
				} else {
					this.maintenanceList(this.id)
				}
			},
			maintenanceList(id) {
				this.$request.api.getVenusOaEquipmentMaintenanceRecordListByPid({
					id: id
				}).then(res => {
					this.maintenanceInformation = res.data.data.datalist
				})
			},
			maintenanceDetails(id) {
				this.$request.api.getMaintenanceRecordById({
					id: id
				}).then(res => {
					this.details = res.data.data
					// equipmentImageList
					if (this.details.equipment_image) {
						this.details.equipment_image.split(',').forEach((item, index) => {
							this.equipmentImageList.push({
								image: item
							})
						})

						// console.log(this.equipmentImageList)
					}
				})
			},
			preview(list, index, arr) {
				console.log('list, index, arr======', list, index, arr)
				uni.previewImage({
					urls: arr.split(','),
					current: index,
				});


				// 	uni.previewImage({
				// 		urls: [list],
				// 		current: 0,
				// 		longPressActions: {
				// 			success: function(data) {
				// 				console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				// 			},
				// 			fail: function(err) {
				// 				console.log(err.errMsg);
				// 			}
				// 		}
				// 	});


			},
			//返回上一页
			prev() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style scoped>
	.feed-back {
		background: #F9F9F9;
		border-radius: 10rpx;
	}

	.feed-colcor1 {
		color: #666;
	}

	.feed-colcor2 {
		color: #333;
	}

	.feed-btn {
		width: 120rpx;
		height: 60rpx;
		float: right;

		.u-btn {
			width: 100%;
			height: 100%;
		}
	}

	.feed-fl {
		.u-btn {
			background: #FF9900;
			border-color: #FF9900;
			color: #fff;
		}
	}

	.act-img {
		border: 2rpx solid #eee;
		border-radius: 10rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.feed-mask {
		width: 100vw;
		height: 100vh;
	}

	.feed-details-box {
		width: 600rpx;
		height: 800rpx;
		background: #fff;
		overflow-y: scroll;
	}

	.billdetails_top {
		/* height: 312rpx; */
		text-align: center;
		background-color: #fff;
		/* margin-top: 60rpx; */
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;

	}

	.rep-deta-box {
		width: 100%;
		min-height: 28rpx;
		height: auto;
		overflow: hidden;
		line-height: 28rpx;
	}

	.rep-deta-box-l {
		float: left;
		color: #666;
		font-size: 28rpx;
	}

	&.rep-deta-box-l2 {
		margin-left: 30rpx;
	}


	.rep-deta-box-r {
		float: right;
		color: #333;
		font-size: 28rpx;
	}

	.rep-deta-box-c {
		color: #999;
	}

	image {
		width: 216rpx;
		height: 216rpx;
		float: left;
		margin-right: 20rpx;
	}

	&:nth-child(3n) {
		margin-right: 0;
	}

	.user_for {
		display: flex;
	}

	.item_year {
		font-size: 34rpx;
		height: 50rpx;
	}

	.line_for {
		width: 4rpx;
		height: 100%;
		margin: 0 20rpx 10rpx;
		background-color: #559DFF;
	}

	.line_radio {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		top: 0;
	}

	.right_box {
		padding: 0rpx 20rpx 20rpx 20rpx;
		width: 80%;
	}

	.desc {
		font-size: 30rpx;
		color: #8e8b8d;
		// display: flex;
		// margin-top: 20rpx;
		align-items: center;

	}

	.index_tao_link {
		width: 550rpx;
		height: 220rpx;
		background: red;
		position: fixed;
		bottom: 72rpx;
		left: 102rpx;
		z-index: 12;
		background: url('https://clhy-img.oss-cn-beijing.aliyuncs.com/icon/bt/a42a490466ce9f18f0e063d5fa87730.png')no-repeat;
		background-size: 100%;
	}

	.index_tao_link_close {
		position: absolute;
		top: 48rpx;
		right: 45rpx;
		font-size: 30rpx;

	}

	.close {
		width: 31px;
		height: 31px;
		position: absolute;
		right: 15px;
		top: 20px;
	}

	.yilingqu {
		margin-top: 40rpx;
		width: 80%;
		height: 84rpx;
		border: none;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 84rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}



	/* /deep/.u-scroll-box .u-tab-bar {
		width: 104rpx !important;
		transform: translate(72px, -100%) !important;
		z-index: 10;
	}

	/deep/#u-tab-item-1+.u-tab-bar {
		width: 104rpx !important;
		transform: translate(252px, -100%) !important;
		z-index: 11;
	} */
</style>